<template>
  <div>
    <div class="outdiv biaoti">退款管理</div>
    <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;">

    <div class="outdiv">
      <div class="xiajuli">
        <el-select style="margin-right:1rem" v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="退款中" value="11"></el-option>
          <el-option label="已退款" value="10"></el-option>
          <el-option label="已驳回" value="13"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" type="primary" circle plain @click="search"></el-button>
        <el-button type="danger" plain @click="reset" circle icon="el-icon-refresh"></el-button>
      </div>
      <el-table :data="elTableData" :header-cell-style="{textAlign:'center',fontSize:'18px'}"
        :cell-style="{ textAlign: 'center' }" style="width: 100%">
        <el-table-column prop="order_number" label="订单号" width="200">
        </el-table-column>
        <el-table-column prop="order_time" label="订单日期" width="180">
        </el-table-column>
        <el-table-column prop="user_name" label="客户">
        </el-table-column>
        <el-table-column prop="pick_name" label="司机">
        </el-table-column>
        <el-table-column prop="order_type_name" label="服务类型">
        </el-table-column>
        <el-table-column prop="order_status_name" label="订单状态">
        </el-table-column>
        <el-table-column prop="option" label="操作" width="280">
          <template slot-scope="scope">
            <el-tooltip content="查看详情" placement="top">
              <el-button type="primary" plain circle size="small" icon="el-icon-s-grid" @click="seeDetail(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="同意退款" placement="top">
              <el-button type="warning" circle icon="el-icon-check" @click="refundBtn(scope.row)" plain size="small" :disabled="scope.row.order_status_name!='退款中'"></el-button>
            </el-tooltip>
            <el-tooltip content="驳回申请" placement="top">
              <el-button type="danger" circle icon="el-icon-close" @click="noAgree(scope.row)" plain size="small" :disabled="scope.row.order_status_name!='退款中'"></el-button>
            </el-tooltip>


          </template>
        </el-table-column>
      </el-table>
      <div class="block shangjuli" align="center">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="elPage"
          :page-sizes="[3,4,5]" :page-size="pageNum" layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="驳回理由" :visible.sync="centerDialogVisible" width="30%" center>
      <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="30" show-word-limit>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="退款详情" :visible.sync="dialogFormVisible">
      <el-form :model="detailData">
        <el-form-item label="订单金额" :label-width="formLabelWidth">
          <el-input v-model="detailData.orderamount_total" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="退款金额" :label-width="formLabelWidth">
          <el-input v-model="detailData.user_payable" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="申请理由" :label-width="formLabelWidth">
          <el-input v-model="detailData.refund_reasons" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="申请时间" :label-width="formLabelWidth">
          <el-input v-model="detailData.application_time" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as api from '../../utils/api'
  export default {
    name: "tuikuan",
    data() {
      return {
        input1: '',
        input2: '',
        input3: '',
        select: '',
        elPage: 1,
        pageNum: 3,
        textarea: '',
        centerDialogVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        tableData: [],
        detailData: []
      }
    },
    created() {
      this.getRefundData()
    },
    computed: {
      elTableData() {
        let start = (this.elPage - 1) * +this.pageNum
        let end = (this.elPage - 1) * this.pageNum + this.pageNum
        return this.tableData.slice(start, end)
      }
    },
    methods: {
      // 查询所有订单的函数
      getRefundData() {
        this.axios({
          url: api.GET_QUERYREFUND,
          method: 'get',
        }).then(data => {
          this.tableData = data.data.data

          // console.log(this.tableData)
        })
      },
      // 查看详情
      seeDetail(item) {
        this.dialogFormVisible = true
        // console.log(item)
        this.detailData = item
        // console.log(this.detailData)
      },
      handleSizeChange(val) {
        this.pageNum = val;
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.elPage = val
        // console.log(`当前页: ${val}`);
      },
      // 同意退款的按钮
      refundBtn(item) {
        this.detailData = item
        // console.log(String(this.detailData.user_payable))
        this.$confirm('该订单确认退款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios({
            method: 'post',
            url: api.POST_AGREEEXIT,
            data: {
              orderNumber: this.detailData.order_number,
              userPayble: String(this.detailData.user_payable)
            }
          }).then(data => {
            // console.log(data)
            if (data.data.code === 200) {
              this.$message({
                type: 'success',
                message: '此订单退款成功!'
              });
            } else {
              this.$message({
                type: 'info',
                message: '此订单退款失败！'
              });
            }
            this.getRefundData()
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退款'
          });
          this.getRefundData()
        });

      },
      // 驳回退款的按钮
      noAgree(item) {
        this.detailData = item
        // console.log(this.detailData)
        // console.log(this.textarea)
        this.centerDialogVisible = true
      },
      // 点击驳回确认按钮
      submit() {
        // console.log(this.detailData.order_number)
        // console.log(this.textarea)
        this.centerDialogVisible = false;
        this.axios({
          method: 'post',
          url: api.POST_NOAGREEEXIT,
          data: {
            orderNumber: this.detailData.order_number,
            rejectReasons: this.textarea
          }
        }).then(data => {
          if (data.data.code === 200) {
            this.$message({
              type: 'success',
              message: '此订单退款申请已驳回!'
            });
          } else {
            this.$message({
              type: 'info',
              message: '此订单退款申请驳回失败！'
            });
          }
          // console.log(data)
          this.getRefundData()
        })

      },
      // 按照订单状态查询订单
      search() {
        // console.log(this.select)
        this.axios({
          method: 'get',
          url: api.GET_QUERYREFUND,
          params: {
            orderStart: this.select
          }
        }).then(data => {
          if (data.data.code === 200) {
            this.tableData = data.data.data
            this.$message({
              type: 'success',
              message: '查询成功!'
            });
            this.elPage = 1
          } else {
            this.$message({
              type: 'info',
              message: '查询失败！没有该订单！'
            });
          }
          // console.log(data)
          // this.tableData=data.data.data
        })
        // this.getRefundData()
      },
      reset() {
        this.getRefundData()
      }
    },

  }
</script>

<style scoped lang="less">
  // .myrefund{
  //   width: 80%;
  //   margin: auto;
  // }
  // .myinput {
  //   text-align: left;
  //   padding: 40px;
  // }

  // .el-textarea__inner{
  //   height: 80px;
  // }
  .shangjuli{
    margin-top: 4rem;
  }
</style>